<template>
  <div id="login" :style="{backgroundImage: 'url(' + imageUrl + ')'}">
    <div class="login-box">
      <div class="login-content">
        <div class="login-left"><slot name="login-left"/></div>
        <div class="login-right">
          <div class="login-title"><slot name="login-title"/></div>
          <div class="login-info"><slot name="login-info"/></div>
          <div class="login-record"><slot name="login-record"/></div>
          <Button type="primary" shape="circle" class="tologin" @click="login">登录</Button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component , Vue , Prop , Emit} from 'vue-property-decorator'

@Component({
  name:'Login'
})
export default class Login extends Vue{
  @Emit('loginClick')
  private login():void{
  }
  @Prop({
    type:String,
    required:true,
    default:''
  })
  imageUrl !: string;
  // imageUrl:string='require("@/assets/images/login_background.jpg");'
}
</script>

<style lang="less" >
#login{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('~assets/images/login_background.jpg');
  .login-box{
    position: relative;
    width: 60rem;
    height: 37rem;
    border-radius: 1.875rem;
    text-align: center;
    background-color: #fff;
    .login-content{
    display: flex;
    width: 100%;
    .tologin{
      width: 300px;
      height: 50px;
      font-size: 20px;
    }
    }
  }
}
</style>